﻿@page "/chart/percent-stacked-bar"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart'>Blazor 100% Stacked Bar Chart</a> example visualizes percentage of sales comparison for different fruits with default 100% stacked bar series in the chart. Legend in the sample shows the information about the series.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the 100% stacked bar type chart. The 100% stacking bar type chart displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the 100% stacked bar series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/stack-bar'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Sales Comparison" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis EdgeLabelPlacement="EdgeLabelPlacement.Shift">
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Month" YName="AppleSales" Width="2" Name="Apple" Type="ChartSeriesType.StackingBar100">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Month" YName="OrangeSales" Width="2" Name="Orange" Type="ChartSeriesType.StackingBar100">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Month" YName="Wasteage" Width="2" Name="Wastage" Type="ChartSeriesType.StackingBar100">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y} (${point.percentage}%)</b>"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StackedBar100ChartData> ChartPoints { get; set; } = new List<StackedBar100ChartData>
    {
        new StackedBar100ChartData { Month = "Jan", AppleSales = 6, OrangeSales = 6, Wasteage = 1 },
        new StackedBar100ChartData { Month = "Feb", AppleSales = 8, OrangeSales = 8, Wasteage = 1.5 },
        new StackedBar100ChartData { Month = "Mar", AppleSales = 12, OrangeSales = 11, Wasteage = 2 },
        new StackedBar100ChartData { Month = "Apr", AppleSales = 15, OrangeSales = 16, Wasteage = 2.5 },
        new StackedBar100ChartData { Month = "May", AppleSales = 20, OrangeSales = 21, Wasteage = 3 },
        new StackedBar100ChartData { Month = "Jun", AppleSales = 24, OrangeSales = 25, Wasteage = 3.5 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class StackedBar100ChartData
    {
        public string Month { get; set; }
        public double AppleSales { get; set; }
        public double OrangeSales { get; set; }
        public double Wasteage { get; set; }
    }
}
